<template>
  <a-row :gutter="24">
    <a-col :span="6">
      <div class="tabTreeName">文件结构树</div>
      <div class="tabTreeContent">
        <template>
          <a-tree
            checkable
            checkStrictly
            v-model="checkedKeys"
            v-if="treeData.length"
            :selectedKeys="selectedKeys"
            :defaultExpandAll='true'
            :tree-data="treeData"
            :default-expanded-keys="defaultExpandNode"
            :default-selected-keys="defaultExpandNode"
            :replace-fields="replaceFields"
            @select="onSelect"
            @check="onCheck"
          >
            <a-icon slot="switcherIcon" type="plus-square" style="display: none"/>
          </a-tree>
        </template>
      </div>
    </a-col>
    <a-col :span="18">
      <div class="tabTreeName">{{selDocName}} <a-input-search placeholder="请输入" style="width: 200px;margin-top: -10px;" v-if="isSearch" @search="changeInput"/></div>
      <div class="tabTreeContent" style="border: 0px">
        <a-table
          :rowKey="record => record.oid"
          :row-selection="rowSelection"
          :pagination="false"
          :columns="columns"
          :data-source="data"
          :components="draggerComponents"
        >
          <span slot="name" slot-scope="text, record">
            <!-- record.checkOutInfo -->
            <a-tooltip placement="topLeft" :title="'已被检出'">
              <img src="@/assets/single/doc.png" style="width: 10px;height: 8px;margin-right: 10px;" v-if="record.isCheckout === true"/>
            </a-tooltip>
            <!-- <a @click="routerPage(record)" style="display: inline;">{{ text }}</a> -->
            <a-tooltip placement="topLeft">
              <template slot="title">
                {{ text }}
              </template>
              {{ text }}
            </a-tooltip>
          </span>
          <template slot="requireDel" slot-scope="text">
            <span style="color: #386BD7">{{ text }}</span>
          </template>
          <!--  插入 filterDropdown  搜索框-->
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`请输入${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
          <!--  插入 filterStateDropdown   @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" 搜索框-->
          <div
            slot="filterStateDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-select
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="handleStateSearch"
            >
              <a-select-option v-for="(item1,index) in stateList" :key="index" :value="item1">
                {{item1}}
              </a-select-option>
            </a-select>
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
        </a-table>
      </div>
    </a-col>
  </a-row>
</template>
<script>
import { api } from '@/api/projectPlan.js'
import { getDocumentTree,getFolderContents } from "@api/planComponent";
import { draggerTable } from '@/mixins/draggerTable'
export default {
  mixins: [draggerTable],
  props: {
    singleSelect: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      components: null,
      dateFormat: 'YYYY-MM-DD',
      checkedKeys:[],
      selectedKeys:[],
      selType: '',
      saveId: '',
      uploadFile: null ,
      action: api.importPIPlanActivities,
      activeKey: "1",
      selDocName: '',
      defaultExpandNode: [],
      treeData: [],
      modalVisible_upload: this.uploadModalVisible,//弹框显隐
      replaceFields: {
        children: 'childs',
        title: 'name',
        key: 'oid'
      },//替换tree里面的属性名称
      /* -----------表格数据所需的字段（开始） -----------*/
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      columns: [
        {
          title: "文件名称",
          width: 180,
          ellipsis: true,
          dataIndex: "name",
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            customRender: "name",
          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        {
          title: "编号",
          width: 160,
          ellipsis: true,
          dataIndex: "number",
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            customRender: "number"
          },
          onFilter: (value, record) =>
            record.number
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        {
          title: "状态",
          width: 100,
          dataIndex: "state",
          scopedSlots: {
            filterDropdown: 'filterStateDropdown',
            customRender: "state"
          },
        },
        {
          title: "修改者",
          width: 100,
          ellipsis: true,
          dataIndex: "modifier",
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            customRender: "modifier"
          },
          onFilter: (value, record) =>
            record.modifier
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },
        },
        {
          title: "上次修改时间",
          width: 200,
          dataIndex: "modifyStamp"
        }
      ],
      data: [],
      dataCopy: [],
      searchData: [],
      stateList:[],
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(100,this.data)
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          this.$emit('selectChange',selectedRows)
          this.data = this.dataCopy;
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.isCheckout === true, // Column configuration not to be checked
            name: record.name,
          },
        }),
        type: this.singleSelect ? 'radio' : 'checkbox'
      };
    },
    oid() {
      // console.log(JSON.parse(sessionStorage.getItem('projectOid')))
      return `OR:com.pisx.pmgt.project.PIProject:${JSON.parse(sessionStorage.getItem('oid'))}`
    }
  },
  mounted() {
    //得到文件结构树
    getDocumentTree({
      oid: this.oid
    }).then(res => {
      // console.log(res)
      this.treeData = res.data.data;
      const defaultNode = this.treeData[0];
      this.checkedKeys.push(this.treeData[0].oid)
      this.defaultExpandNode.push(defaultNode.oid)
      this.getDocContent(defaultNode.oid)
      this.selDocName = defaultNode.name
    })
  },
  methods: {
    onSelect(selectedKeys, info) {
      this.selDocName = info.node.title
      this.getDocContent(selectedKeys[0])
      this.checkedKeys = selectedKeys
    },
    onCheck(checkedKeys, info) {
      if(checkedKeys.checked.length > 1){
        this.checkedKeys = [checkedKeys.checked[checkedKeys.checked.length - 1]]
      }else{
         this.checkedKeys = [this.treeData[0].oid]
         
      }
      // this.onSelect(checkedKeys, info)
      // this.selectedKeys = checkedKeys
      // this.getDocContent(checkedKeys.checked[0])
    },
    //得到文件夹内容
    getDocContent(oid){
      getFolderContents({oid}).then(res => {
        console.log(99,res.data.data)
        let back = res.data.data
        // back.forEach(item => {
        //   item.modifyStamp = timeFormat(item.modifyStamp,this.dateFormat)
        // })
        this.dataCopy = back;
        this.data = back;
        this.searchData = back;
        let stateList = back.map(item=>{
          return item.state
        })
        this.stateList = [...new Set(stateList)];
      })
    },
    // 搜索
    changeInput(value) {
      if(value) {
        this.data = this.searchData.filter(item => {
          return item.name.indexOf(value) > -1
        })
      }else{
        this.getDocContent(this.checkedKeys[0])
      }
      
    },
    rotateWordTree(e) {
      let translateYFront = e.target.style.transform
      if (translateYFront == 'rotate(0deg)' && !translateYFront) {
        e.target.style.transform = 'rotate(90deg)';
      } else {
        e.target.style.transform = 'rotate(0deg)';
      }
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      console.log(987,selectedKeys, confirm, dataIndex)
      this.data = this.dataCopy;
      if(selectedKeys[0]){
        this.data = this.data.filter(item => {
          return item[dataIndex].indexOf(selectedKeys[0]) > -1
        })
        confirm();
        this.searchText = selectedKeys[0];
        this.searchedColumn = dataIndex;
      }
    },
    handleStateSearch(e){
      this.data = this.dataCopy;
      if(e){
        this.data = this.data.filter(item => {
          return item.state.indexOf(e) > -1
        })
        this.searchText = e;
      }
    },
    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
      this.data = this.dataCopy;
    },
  }
}
</script>
<style lang="less" scoped>
.local-upload {
  padding: 0 170px
}
/deep/ .ant-modal {
  width: 1100px !important;
}
/deep/ .ant-modal-body {
  padding: 8px;
}
/deep/ .ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.15);
}
//关闭样式
/deep/ .ant-tree-switcher_close {
  background: url("~@assets/todo/jiahao.svg") no-repeat;
  i {
    display: none;
  }
}
/deep/ .ant-table-wrapper {
  height: 360px;
  overflow-y: auto;
}
//打开样式
/deep/ .ant-tree-switcher_open {
  background: url("~@assets/todo/jianhao.svg") no-repeat;
  i {
    display: none;
  }
}
/deep/.ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
/deep/.ant-tree{
  height: 340px;
  overflow: auto;
  margin: 5px 0px 5px 10px;
}
/deep/.ant-upload-list-item-name{
  text-align: left;
}
/deep/.ant-upload .ant-upload-drag{
  height: 150px;
}
/deep/.ant-upload.ant-upload-drag .ant-upload{
  padding: 16px 0;
}
/deep/.ant-upload-list{
  margin: 10px 0px 10px 0px;
  height: 120px;
  overflow: auto;
}
/deep/.ant-upload.ant-upload-drag p.ant-upload-text{
  font-size: 14px;
  color: #00000073;
}
/deep/.ant-cascader-picker-arrow{
  width: 16px;
  height: 16px;
  margin-top: -8px;
}
 /deep/ .ant-table-thead > tr > th {
    border-right: 1px solid #eee;
  }
.tabBox {
  /deep/ .ant-tabs-nav {
    display: flex;
  }
  /deep/ .ant-tabs-nav .ant-tabs-tab {
    padding: 5px 9px;
  }
  .tabTreeName {
    width: 100%;
    height: 30px;
    font-size: 16px;
    padding-left: 10px;
    color: #333333;
    display: flex;
    justify-content: space-between;
  }
  .tabTreeContent {
    width: 100%;
    height: 360px;
    border: 1px solid #dddddd;
    border-radius: 5px;
  }
}
</style>
test5